<template>
  <div id='wrap'>
    <!-- <div v-for="item in 5" :class="`inner img${item}`" v-show="(item-1)===cun"></div>
    <ul class="nav">
      <li v-for="(item,index) in content" :class="{'active':index===cun}" @click="cun=index,yd()">{{ item }}</li>
    </ul> -->
  </div>
</template>

<script lang='ts'>
export default {
  name: 'tab',
}
</script>

<script lang='ts' setup>
import { ref } from 'vue'
// const content=['超级粉丝2024','全球总决赛 荣耀征程','T1小小奥莉安娜','星守小小阿卡丽','s14赛程']
// const cun=ref(0)
// function yd(){

// }
</script>

<style scoped lang='scss'>
#wrap{
    width: 820px;
    height: 380px;
    margin: 50px auto;
    border: 2px solid wheat;
    position: relative;
    .inner{
      width: 100%;
      height: 340px;
    }
    .img1{
      background: url(https://ossweb-img.qq.com/upload/adw/image/977/20241010/59fc14ad5433872c7255361d269b0862.jpeg) center center/cover no-repeat;
    }
    .img2{
      background: url(https://ossweb-img.qq.com/upload/adw/image/977/20241009/2fd63a8a89b7a787c48a002811549970.jpeg) center center/cover no-repeat;
    }
    .img3{
      background: url(https://ossweb-img.qq.com/upload/adw/image/977/20240926/6ff9a3b91a118fd01d3027a7184ae7b4.jpeg) center center/cover no-repeat;
    }
    .img4{
      background: url(https://ossweb-img.qq.com/upload/adw/image/977/20241010/a930e92f486f585dbd4fd36ade1115aa.jpeg) center center/cover no-repeat;
    }
    .img5{
      background: url(https://ossweb-img.qq.com/upload/adw/image/977/20241011/f3d821ee267bd18f4e0c11582280eca5.jpeg) center center/cover no-repeat;
    }
    .nav{
				width: 100%;
				height: 40px;
				position: absolute;
				bottom: 0px;
				overflow: hidden;
				background-color: #e3e2e2;
        li{
				float:left;
				width: calc(100% / 5);
				height: 100%;
				line-height: 40px;
				text-align: center;
				font-size: 14px;
        }
        .active{
				background-color: white;
				color: rgb(187, 142, 102);
				font-weight: bold;
			  }
			}
}
</style>
